// default color
:root
  --text-color: $text-color
  --text-strong-color: $text-strong-color
  --text-light-color: $text-light-color
  --text-white-color: $text-white-color
  --divider-color: $divider-color
  --title-color: $title-color
  --link-color: $link-color
  --post-link-color: $post-link-color
  --link-hover-color: $link-hover-color
  --info-text-color: $info-text-color
  --widget-background-color: $widget-background-color
  --body-background-color: $body-background-color
  --badge-background-color: $badge-background-color
  --badge-hover-background-color: $badge-hover-background-color
  --border-color: $border-color
  --pre-color: $pre-color
  --tbody-background-color: $tbody-background-color
  --code-color: $code-color
  --code-background-color: $code-background-color
  --blue-tag-color: $blue-tag-color
  --blockquote-color: $blockquote-color
  --note-primary-border-color: $note-primary-border-color
  --note-primary-color: $note-primary-color
  --note-success-border-color: $note-success-border-color
  --note-success-color: $note-success-color
  --note-info-border-color: $note-info-border-color
  --note-info-color: $note-info-color
  --note-warning-border-color: $note-warning-border-color
  --note-warning-color: $note-warning-color
  --note-danger-border-color: $note-danger-border-color
  --note-danger-color: $note-danger-color
  --highlight-comment-color: $highlight-comment-color
  --highlight-tag-color: $highlight-tag-color
  --highlight-attr-color: $highlight-attr-color
  --highlight-literal-color: $highlight-literal-color
  --highlight-keyword-color: $highlight-keyword-color
  --highlight-string-color: $highlight-string-color
  --highlight-builtin-color: $highlight-builtin-color
  --around-shadow-style: $around-shadow-style
  --tag-shadow-style: $tag-shadow-style
  --image-filter-style: $image-filter-style
// dark-mode color
dark-mode()
  --text-color: $dark-text-color
  --text-strong-color: $dark-text-strong-color
  --text-light-color: $dark-text-light-color
  --text-white-color: $dark-text-white-color
  --divider-color: $dark-divider-color
  --title-color: $dark-title-color
  --link-color: $dark-link-color
  --link-hover-color: $dark-link-hover-color
  --post-link-color: $dark-post-link-color
  --info-text-color: $dark-info-text-color
  --widget-background-color: $dark-widget-background-color
  --body-background-color: $dark-body-background-color
  --badge-background-color: $dark-badge-background-color
  --badge-hover-background-color: $dark-badge-hover-background-color
  --border-color: $dark-border-color
  --pre-color: $dark-pre-color
  --tbody-background-color: $dark-tbody-background-color
  --code-color: $dark-code-color
  --code-background-color: $dark-code-background-color
  --blue-tag-color: $dark-blue-tag-color
  --blockquote-color: $dark-blockquote-color
  --note-primary-border-color: $dark-note-primary-border-color
  --note-primary-color: $dark-note-primary-color
  --note-success-border-color: $dark-note-success-border-color
  --note-success-color: $dark-note-success-color
  --note-info-border-color: $dark-note-info-border-color
  --note-info-color: $dark-note-info-color
  --note-warning-border-color: $dark-note-warning-border-color
  --note-warning-color: $dark-note-warning-color
  --note-danger-border-color: $dark-note-danger-border-color
  --note-danger-color: $dark-note-danger-color
  --around-shadow-style: $dark-around-shadow-style
  --tag-shadow-style: $dark-tag-shadow-style
  --image-filter-style: $dark-image-filter-style
@media (prefers-color-scheme: dark)
  :root:not([data-user-color-scheme])
    dark-mode()
[data-user-color-scheme='dark']
  dark-mode()
